<template>
  <Tabbar></Tabbar>
  <div class="main">
    <router-view></router-view>
    <div class="arrow" @click="backTop" v-if="show">
      <img src="@/assets/img/up_arrow.jpg" alt="" />
    </div>
  </div>
  <Bottombar />
</template>

<script lang="ts" setup>
import Tabbar from "@/components/common/tabbar/tabbar.vue";
import Bottombar from "@/components/common/tabbar/bottombar.vue";
import { ref } from "vue";

const show = ref(false)
const backTop = () => {
  document.documentElement.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
};

window.addEventListener('scroll',() => {
  if(document.documentElement.scrollTop > 500){
    show.value = true
  }else{
    show.value = false
  }
})

</script>

<style scoped lang="less">
.main {
  .arrow {
    position: fixed;
    bottom: 20px;
    right: 50px;
    width: 50px;
    height: 50px;
    z-index: 1;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
}
</style>
